<template>
  <view class="recruit-list">
    <view @click="linkDetail(item.id, index)" class="item u-p-30" v-for="(item, index) in recruitList" :key="index">
      <view :class="{active: item.xin_t}" class="title u-rela u-flex u-row-between">
        <view class="name u-font-32">{{item.name || ""}}</view>
        <view class="money u-font-34">{{item.salary || ""}}</view>
        <view v-if="item.xin_t" class="number u-abso">{{item.xin_t || ""}}</view>
      </view>
      <view class="tag u-font-26 u-flex u-flex-wrap">
        <view class="text">{{item.duty || ""}}</view>
        <view class="text">{{item.education_name || ""}}</view>
        <template v-if="item.treatment">
          <view v-for="(its,ind) in item.treatment.split(',')" :key="ind" class="text">{{its || ""}}</view>
        </template>
      </view>
      <view class="people u-font-26 u-flex">
        <view class="uname">{{item.corporate_lianxi || ""}}</view>
        <view class="spot"></view>
        <view class="trade">{{item.corporate_industry || ""}}</view>
      </view>
      <view class="company u-m-t-30 u-flex">
        <view class="image">
          <u-image class="image" :src="item.logo" mode="aspectFill" width="100" height="100" border-radius="4"></u-image>
        </view>
        <view class="info u-flex-1 u-m-l-20">
          <view class="top u-flex">
            <view class="name u-line-1 u-flex-1 u-m-r-10 u-font-30">{{item.corporate_name || ""}}</view>
            <u-image class="image" src="/static/img/authen.png" mode="widthFix" width="120"></u-image>
          </view>
          <view class="bottom u-m-t-15 u-font-26 u-flex">
            <view class="address u-line-1 u-flex-1 u-m-r-20">
              <u-icon name="map" size="28" collor="#999"></u-icon>
              {{item.corporate_city || ""}}
            </view>
            <view class="distance u-font-26">距您{{item.km || "0"}}km</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "recruit-list",
  data() {
    return {};
  },
  props: {
    // 列表
    recruitList: {
      type: Array,
      default: () => [],
    },
    // 是否跳转
    isLink: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    linkDetail(id, index) {
      if (!this.isLink) this.recruitList[index].xin_t = "";
      let url = this.isLink
        ? `/pages/subpackages/classify/recruit/detail?id=${id}`
        : `/pages/subpackages/mine/recruit/user?id=${id}`;

      uni.navigateTo({ url });
    },
  },
};
</script>

<style lang="scss" scoped>
.recruit {
  &-list {
    .item {
      margin: 20rpx 0 0;
      background-color: $uni-bg-color;
      border-radius: 10rpx;
    }

    .title {
      font-weight: bold;

      &.active {
        padding-right: 40rpx;
      }

      .number {
        top: -10rpx;
        right: -10rpx;
        top: -10rpx;
        padding: 4rpx 8rpx;
        line-height: 24rpx;
        background-color: $uni-bg-color-main-red;
        border-radius: 50px;
        font-size: 24rpx;
        color: $uni-text-color-inverse;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
    }

    .money {
      color: $uni-text-color-main;
    }

    .tag {
      margin: 10rpx 0;
      color: $uni-text-color-grey;
      line-height: 1.5;

      .text {
        padding: 0 8rpx;

        &:nth-child(n + 2) {
          position: relative;

          &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 80%;
            background-color: $uni-text-color-grey;
          }
        }
      }
    }

    .people {
      color: $uni-text-color-main;
    }

    .spot {
      margin: 0 10rpx;
      width: 8rpx;
      height: 8rpx;
      background-color: $uni-bg-color-main;
      border-radius: 50%;
    }

    .address,
    .distance {
      color: $uni-text-color-grey;
    }
  }
}
</style>
